<template>
  <view>
    <!-- 1.0 收货地址 -->
    <view class="address" @tap="getAddressHandle">
      <!-- 1.1 情况1：收货地址 -->
      <view class="address_info" v-if="address.userName">
        <text class="address_detail" user-select>{{ addressDetail }} </text>
        <view class="address_bottom">
          <text class="addres_bottom_text">{{ address.userName }}</text>
          <text class="address_bottom_text">{{ address.telNumber }}</text>
        </view>
      </view>
      <!-- 1.2 情况2： 空状态 -->
      <view class="address_empty" v-else>
        <view class="address_empty_button">
          点击获取收货地址
        </view>
      </view>
    </view>
    <!-- 2.0 结算商品列表 -->
    <view class="goods_list">
      <view class="goods_list_title">已选商品</view>
      <!-- 小程序的 block 空标签，类似于 vue 中的 template  -->
      <view class="goods_item" v-for="item in cartList" :key="item.goods_id">
        <GoodsItem v-if="item.goods_selected" :item="item">
          <view class="goods_item_count">x{{ item.goods_count }}</view>
        </GoodsItem>
      </view>
    </view>
    <!-- 3.0 底部栏 -->
    <view v-if="cartList.length" class="bottom">
      <text class="total_text">合计：</text>
      <text class="total_price price">{{ totalPrice }}</text>
      <view class="account">去支付({{ account }})</view>
    </view>
  </view>
</template>

<script>
import GoodsItem from "@/components/GoodsItem/index.vue";
export default {
  components: {
    GoodsItem
  },
  data() {
    return {
      address: {},
      cartList: []
    };
  },
  computed: {
    addressDetail() {
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    totalPrice() {
      let totalPrice = 0;
      //总价计算
      //    选中的商品：商品单价 * 商品数量      累加起来即可
      this.cartList.forEach(item => {
        if (item.goods_selected) {
          totalPrice += item.goods_price * item.goods_count;
        }
      });
      return totalPrice;
    },

    // 计算结算个数
    //    自己体验一下 淘宝App 和 京东 App 的计算规则
    account() {
      let account = 0;

      // 淘宝 App 的计算规则，只计算勾勾的数量
      // this.cartList.forEach((item)=>{
      //   if(item.goods_selected){
      //     account += 1;
      //   }
      // })

      // 京东 App 的计算规则，计算选中的商品总件数
      this.cartList.forEach(item => {
        if (item.goods_selected) {
          account += item.goods_count;
        }
      });
      return account;
    }
  },
  onLoad() {
    this.address = uni.getStorageSync("address") || {};
    this.cartList = uni.getStorageSync("cartList") || [];
  },
  methods: {
    getAddressHandle() {
      // 获取用户收货地址。调起用户编辑收货地址原生界面。
      uni.chooseAddress({
        success: res => {
          console.log(res); //编辑完成后返回用户选择的地址
          // 绑定到 data 中用于界面渲染
          this.address = res;
          // 保存到本地存储
          uni.setStorageSync("address", res);
        }
      });
    }
  }
};
</script>

<style lang="less" >
page {
  background-color: #f9f9f9;
}
.address {
  height: 188rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 5rpx;
  .address_empty {
    display: flex;
    // display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    .address_empty_button {
      width: 300rpx;
      height: 90rpx;
      border-radius: 45rpx;
      border: 1rpx solid var(--mainColor);
      font-size: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--mainColor);
    }
  }
  .address_info {
    padding: 20rpx;
    .address_detail {
      font-size: 34rpx;
    }
    .address_bottom {
      margin-top: 20rpx;
      font-size: 26rpx;
      .addres_bottom_text {
        margin-right: 30rpx;
      }
    }
  }
}
.goods_list {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 5rpx;
  .goods_list_title {
    height: 88rpx;
    padding: 0 20rpx;
    display: flex;
    align-items: center;
  }
  .goods_item {
    position: relative;
    .goods_item_count {
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
      font-size: 30rpx;
    }
  }
}
.bottom {
  height: 88rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  // 同时设置左右，可以拉伸出宽度
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-top: 1rpx solid #ddd;
  .total_text {
    font-size: 26rpx;
    margin-left: 20rpx;
  }
  .price {
    font-size: 36rpx;
    flex: 1;
  }
  .account {
    width: 150rpx;
    height: 52rpx;
    background-color: var(--mainColor);
    color: #fff;
    border-radius: 30rpx;
    font-size: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>